<template>
  <div class="filter">
    <div class="filter_item">
      房号：<Input v-model="roomNumber" disabled style="width: 300px" />
    </div>
    <div class="filter_item">
      入住时间：<Input v-model="rzDate" disabled style="width: 300px" />
    </div>
    <div class="filter_item">
      实际退房时间：<DatePicker
        type="datetime"
        placeholder="Select date and time"
        style="width: 200px"
        @on-change="dateChange"
      ></DatePicker>
    </div>
    <div class="filter_item">
      <Button type="info" @click="addRoomHistory">确认退房</Button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ClearRoom",
  components: {
    axios,
  },
  data() {
    return {
      roomNumber: 0,
      userName:"",
      rzDate:"",
      leaveDate: "",
    };
  },
  methods: {
    dateChange(e) {
      this.leaveDate = e;
    },
    confirm() {
      console.log(this.roomNumber);
      this.$Modal.confirm({
        title: "Title",
        content: "确认信息无误！",
        onok: () => {
          this.addRoomHistory();
        },
        oncancel: () => {
          this.$Message.info("已取消");
        },
      });
    },
    clearRoom() {
      axios
        .post("/api/room/clearRoom", { roomNumber: this.roomNumber })
        .then((res) => {
          console.log(res.data.data);
          this.$emit("on-close-modal", false);
        });
    },
    addRoomHistory() {
      if (this.leaveDate != "") {
        axios
          .post("/api/history/addHistory", {
            roomNumber: this.roomNumber,
          leaveDate: this.leaveDate,
          })
          .then((res) => {
            console.log(res.data.data);
            this.clearRoom();
          });
      } else {
        alert("请填写准确的退房时间！");
      }
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
</style>